<template>
    <div class="white-box">
        <cell-tip tip="名片底图最佳尺寸为750 X 1224 像素; 小程序码必须空出位置，不得覆盖、遮挡。" />
        <div class="card-box">
            <div class="card-preview">
                <p class="preview-text">预览图片</p>
                <div class="card-img">
                    <el-image class="card-image" :src="proxy.imgUrl + pre_img" fit="cover" v-if="pre_img" />
                    <div class="card-code">
                        <el-image src="https://saas.huashushop.com/saas/img/qrcode.png" fit="cover" />
                    </div>
                </div>
            </div>
            <div class="card-up">
                <p class="preview-text">操作</p>
                <div class="card-opera">
                    <el-button class="step-btn" color="#4B93FA" @click="clickImg">上传底图</el-button>
                    <el-button class="step-btn" type="success" :loading="btn_loading" @click="clickConfirm">确认保存</el-button>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片库 -->
    <picture-library :show="showImg" :select_multiple="false" @close="showImg = false" @select="selectImg">
    </picture-library>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import CellTip from "@components/cell-tip.vue"
import PictureLibrary from "@components/PictureLibrary.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getConfigs()
})

function getConfigs() {
    proxy.$axios.get('decorate/inviteCard').then(res => {
        if (res.data.code == 0) {
            let result = res.data.data
            pre_img.value = result.bg_photo || 'tenant_593be52a46f869eea8b31d146d21de7a/album/202303/20230309_18cc09273ace17c4852765c318cc118a.png'
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => { })
}

// 保存
const pre_img = ref("")
const btn_loading = ref(false)
const clickConfirm = () => {
    if (pre_img.value == "") {
        proxy.$message({ message: "请上传底图", type: "success" })
        return
    }
    btn_loading.value = true
    proxy.$axios.post('decorate/inviteCard', {
        bg_photo: pre_img.value
    }).then(res => {
        btn_loading.value = false
        if (res.data.code == 0) {
            proxy.$message({ message: "保存成功！", type: "success" })
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => {
        btn_loading.value = false
    })
}

/**
 * 添加/更换图片
 * @param {Boolean} showImg 显示图片库
 * @param {Number} arr_index 数组索引
 * @param {Object} arr_item 数据项
 * @param {Function} clickImg 点击更换图片，
 * @param {Function} selectImg 选择图片
 */
const showImg = ref(false)
const clickImg = () => {
    showImg.value = true
}
const selectImg = (val) => {
    showImg.value = false
    pre_img.value = val[0].photo
}
</script>
<script>
export default {
    name: "AgentCard",
}
</script>

<style lang="less" scoped>
.card-img {
    display: flex;
    background-color: #f7f7f9;
    width: 100%;
    height: 612px;
    position: relative;

    .card-code {
        position: absolute;
        bottom: 56px;
        left: 50%;
        transform: translateX(-50%);

        .el-image {
            width: 180px;
        }
    }
}

.card-box {
    display: flex;

    .card-preview {
        width: 375px;
        margin-right: @margin-base * 12;

        .card-image {
            width: 375px;
        }
    }

    .preview-text {
        font-size: @font-size-md;
        font-weight: bold;
        margin-bottom: @margin-mdl;
    }

    .card-opera {
        display: flex;
        flex-direction: column;
    }
}

.step-btn {
    color: #fff;
    margin-bottom: @margin-md;
    margin-left: 0;
}</style>
